<template>
  <div class="movies-container" v-if="data">
    <CommonNav :data="data" />
    <ul class="t-body-movies" v-if="data.id == 'movies'" ref="movies">
      <li>
        <div class="flim-box clearfix" :style="{ marginLeft: marginLeft }">
          <div class="flim" v-for="item in data.hot" :key="item.id">
            <img :src="item.img" class="flim-img" />
            <img
              src="//s0.meituan.net/bs/fe-web-meituan/25e6614/img/imax.png"
              class="flim-quality"
              style="display: inline-block"
            />
            <div class="flim-info">
              <div class="flim-mark">
                观众评分<span class="mark">{{ item.mk }}</span>
              </div>
              <div class="clearfix">
                <span class="flim-name">{{ item.nm }}</span>
                <span class="buy-ticket">购票</span>
              </div>
            </div>
          </div>
        </div>
      </li>
      <div @click="changeIndex(index - 1)" class="btn l-btn">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div @click="changeIndex(index + 1)" class="btn r-btn">
        <i class="el-icon-arrow-right"></i>
      </div>
    </ul>
  </div>
</template>

<script>
import CommonNav from "../../components/commonNav.vue";
export default {
  components: {
    CommonNav,
  },
  data() {
    return {
      data: {
        id: "movies",
        title: "猫眼电影",
        navTitle: [
          { adress: "上海", tab: "sh" },
          { adress: "吉林", tab: "jl" },
          { adress: "长春", tab: "cc" },
          { adress: "哈尔滨", tab: "hrb" },
          { adress: "齐齐哈尔", tab: "qqhe" },
          { adress: "牡丹江", tab: "mdj" },
          { adress: "延边朝鲜族自治区", tab: "yb" },
          { adress: "四平", tab: "sp" },
        ],
        hot: [
          {
            bingeWatch: 0,
            img: "https://p0.meituan.net/movie/6876f0a4db61cab652fdc3d3ed14e94c4924473.jpg@267w_371h_1e_1c",
            boxInfo: "上映10天，累计票房84286万",
            cat: "剧情",
            civilPubSt: 0,
            desc: "主演:张涵予,袁泉,朱亚文",
            dir: "刘伟强",
            dur: 129,
            effectShowNum: 0,
            followst: 0,
            globalReleased: true,
            haspromotionTag: false,
            headLineShow: false,
            headLines: [],
            headLinesVO: [],
            id: 1337700,
            isRevival: false,
            late: false,
            localPubSt: 0,
            mark: false,
            mk: 9.5,
            movieType: 0,
            newsHeadlines: [],
            nm: "中国医生",
            pn: 178,
            preSale: 0,
            preShow: false,
            proScore: 0,
            proScoreNum: 0,
            pubDate: 1625760000000,
            pubShowNum: 0,
            recentShowDate: 1626537600000,
            recentShowNum: 0,
            rt: "2021-07-09",
            sc: 9.5,
            scm: "张涵予袁泉深度还原抗疫最前线",
            scoreLabel: "猫眼购票评分",
            showCinemaNum: 65,
            showInfo: "今天65家影院放映918场",
            showNum: 918,
            showTimeInfo: "2021-07-09上映",
            showst: 3,
            snum: 289471,
            star: "张涵予,袁泉,朱亚文",
            totalShowNum: 2293,
            ver: "IMAX 2D/杜比影院 2D/中国巨幕2D/CINITY 2D/2D",
            videoId: 472153,
            videoName: "《中国医生》终极预告 众实力演员致敬英雄城市",
            videourl:
              "https://vod.pipi.cn/43903a81vodtransgzp1251246104/6025ff213701925920237586025/v.f42906.mp4",
            vnum: 24,
            vodPlay: false,
            weight: 1,
            wish: 475631,
            wishst: 0,
          },
          {
            bingeWatch: 0,
            img: "https://p0.meituan.net/movie/6876f0a4db61cab652fdc3d3ed14e94c4924473.jpg@267w_371h_1e_1c",
            boxInfo: "上映2天，累计票房6178万",
            cat: "青春,歌舞,喜剧",
            civilPubSt: 0,
            desc: "主演:彭昱畅,许恩怡,张宥浩",
            dir: "张一白,韩琰",
            dur: 108,
            effectShowNum: 0,
            followst: 0,
            globalReleased: true,
            haspromotionTag: false,
            headLineShow: false,
            id: 1371295,
            isRevival: false,
            late: false,
            localPubSt: 0,
            mark: false,
            mk: 8.8,
            movieType: 0,
            nm: "燃野少年的天空",
            pn: 155,
            preSale: 0,
            preShow: false,
            proScore: 0,
            proScoreNum: 0,
            pubDate: 1626451200000,
            pubShowNum: 0,
            recentShowDate: 1626537600000,
            recentShowNum: 0,
            rt: "2021-07-17",
            sc: 8.8,
            scm: "彭昱畅领衔起舞、放飞青春",
            scoreLabel: "猫眼购票评分",
            showCinemaNum: 65,
            showInfo: "今天65家影院放映610场",
            showNum: 610,
            showTimeInfo: "2021-07-17 本周六上映",
            showst: 3,
            snum: 39843,
            star: "彭昱畅,许恩怡,张宥浩",
            totalShowNum: 1410,
            ver: "中国巨幕2D/CINITY 2D/2D",
            videoId: 473169,
            videoName:
              "《燃野少年的天空》彭昱畅独白预告，每个人都值得拥有闪耀的人生",
            videourl:
              "https://vod.pipi.cn/fec9203cvodtransbj1251246104/a1423eda3701925920934232170/v.f42905.mp4",
            vnum: 12,
            vodPlay: false,
            weight: 1,
            wish: 270860,
            wishst: 0,
          },
          {
            bingeWatch: 0,
            img: "https://p0.meituan.net/movie/6876f0a4db61cab652fdc3d3ed14e94c4924473.jpg@267w_371h_1e_1c",
            boxInfo: "上映18天，累计票房45835万",
            cat: "剧情,历史",
            civilPubSt: 0,
            desc: "主演:黄轩,倪妮,王仁君",
            dir: "黄建新,郑大圣",
            dur: 137,
            effectShowNum: 0,
            followst: 0,
            globalReleased: true,
            haspromotionTag: false,
            headLineShow: false,
            id: 1336183,
            isRevival: false,
            late: false,
            localPubSt: 0,
            mark: false,
            mk: 9.4,
            movieType: 0,
            nm: "1921",
            pn: 466,
            preSale: 0,
            preShow: false,
            proScore: 0,
            proScoreNum: 0,
            pubDate: 1625068800000,
            pubShowNum: 0,
            recentShowDate: 1626537600000,
            recentShowNum: 0,
            rt: "2021-07-01",
            sc: 9.4,
            scm: "跨越百年的致敬！",
            scoreLabel: "猫眼购票评分",
            showCinemaNum: 51,
            showInfo: "今天51家影院放映100场",
            showNum: 100,
            showTimeInfo: "2021-07-01上映",
            showst: 3,
            snum: 172000,
            star: "黄轩,倪妮,王仁君",
            totalShowNum: 352,
            ver: "IMAX 2D/杜比影院 2D/中国巨幕2D/CINITY 2D/2D",
            videoId: 471915,
            videoName: "《1921》终极预告：七一公映庆祝中国共产党成立一百周年",
            videourl:
              "https://vod.pipi.cn/fec9203cvodtransbj1251246104/f8d4edab3701925919879007612/v.f42905.mp4",
            vnum: 34,
            vodPlay: false,
            weight: 1,
            wish: 426793,
            wishst: 0,
          },
          {
            bingeWatch: 0,
            img: "https://p0.meituan.net/movie/6876f0a4db61cab652fdc3d3ed14e94c4924473.jpg@267w_371h_1e_1c",
            boxInfo: "上映10天，累计票房7540万",
            cat: "动画",
            civilPubSt: 0,
            desc: "主演:鞠萍,董浩,陈怡",
            dir: "何澄,刘可欣",
            dur: 85,
            effectShowNum: 0,
            followst: 0,
            globalReleased: true,
            haspromotionTag: false,
            headLineShow: false,
            id: 1303100,
            isRevival: false,
            late: false,
            localPubSt: 0,
            mark: false,
            mk: 8.9,
            movieType: 0,
            nm: "新大头儿子和小头爸爸4：完美爸爸",
            pn: 125,
            preSale: 0,
            preShow: false,
            proScore: 0,
            proScoreNum: 0,
            pubDate: 1625760000000,
            pubShowNum: 0,
            recentShowDate: 1626537600000,
            recentShowNum: 0,
            rt: "2021-07-09",
            sc: 8.9,
            scm: "经典IP，完美升级，真假老爸大对决",
            scoreLabel: "猫眼购票评分",
            showCinemaNum: 56,
            showInfo: "今天56家影院放映203场",
            showNum: 203,
            showTimeInfo: "2021-07-09上映",
            showst: 3,
            snum: 16045,
            star: "鞠萍,董浩,陈怡",
            totalShowNum: 319,
            ver: "2D",
            videoId: 472230,
            videoName:
              "《新大头儿子和小头爸爸4：完美爸爸》曝终极预告：7月9日全国上映",
            videourl:
              "https://vod.pipi.cn/43903a81vodtransgzp1251246104/c849f02a3701925920388991720/v.f42905.mp4",
            vnum: 9,
            vodPlay: false,
            weight: 1,
            wish: 50009,
            wishst: 0,
          },
          {
            bingeWatch: 0,
            img: "https://p0.meituan.net/movie/6876f0a4db61cab652fdc3d3ed14e94c4924473.jpg@267w_371h_1e_1c",
            boxInfo: "上映10天，累计票房5757万",
            cat: "奇幻,冒险,动画",
            civilPubSt: 0,
            desc: "主演:朱光祖,张茗,周子瑜",
            dir: "林永长",
            dur: 111,
            effectShowNum: 0,
            followst: 0,
            fra: "上海国际电影节",
            ftime: "2021-06",
            globalReleased: true,
            haspromotionTag: false,
            headLineShow: false,
            id: 1250950,
            isRevival: false,
            late: false,
            localPubSt: 0,
            mark: false,
            mk: 8.9,
            movieType: 0,
            nm: "俑之城",
            pn: 50,
            preSale: 0,
            preShow: false,
            proScore: 0,
            proScoreNum: 0,
            pubDate: 1625760000000,
            pubShowNum: 0,
            recentShowDate: 1626537600000,
            recentShowNum: 0,
            rt: "2021-07-09",
            sc: 8.9,
            scm: "秦时明月今何在，万俑之城话巅峰",
            scoreLabel: "猫眼购票评分",
            showCinemaNum: 41,
            showInfo: "今天41家影院放映97场",
            showNum: 97,
            showTimeInfo: "2021-07-09上映",
            showst: 3,
            snum: 37932,
            star: "朱光祖,张茗,周子瑜",
            totalShowNum: 215,
            ver: "3D/2D",
            videoId: 472335,
            videoName:
              "《俑之城》终极预告报告：只有我能定义我是谁！7月9日，震撼上映！",
            videourl:
              "https://vod.pipi.cn/fec9203cvodtransbj1251246104/debce5ff3701925920310458843/v.f42905.mp4",
            vnum: 14,
            vodPlay: false,
            weight: 1,
            wish: 64677,
            wishst: 0,
          },
          {
            bingeWatch: 0,
            img: "https://p0.meituan.net/movie/6876f0a4db61cab652fdc3d3ed14e94c4924473.jpg@267w_371h_1e_1c",
            boxInfo: "上映3天，累计票房2342万",
            cat: "剧情,动画,冒险",
            civilPubSt: 0,
            desc: "主演:朱婧,白文显,李扬",
            dir: "刘志江,乔彧",
            dur: 92,
            effectShowNum: 0,
            followst: 0,
            globalReleased: true,
            haspromotionTag: false,
            headLineShow: false,
            id: 1432307,
            isRevival: false,
            late: false,
            localPubSt: 0,
            mark: false,
            mk: 0,
            movieType: 0,
            nm: "济公之降龙降世",
            pn: 54,
            preSale: 0,
            preShow: false,
            proScore: 0,
            proScoreNum: 0,
            pubDate: 1626364800000,
            pubShowNum: 0,
            recentShowDate: 1626537600000,
            recentShowNum: 0,
            rt: "2021-07-16",
            sc: 0,
            scm: "少年济公初长成，火力全开终成神",
            scoreLabel: "暂无评分",
            showCinemaNum: 64,
            showInfo: "今天64家影院放映241场",
            showNum: 241,
            showTimeInfo: "2021-07-16 本周五上映",
            showst: 3,
            snum: 10273,
            star: "朱婧,白文显,李扬",
            totalShowNum: 532,
            ver: "中国巨幕3D/中国巨幕2D/3D/2D",
            videoId: 473056,
            videoName: "《济公之降龙降世》终极预告发布，预售开启",
            videourl:
              "https://vod.pipi.cn/fec9203cvodtransbj1251246104/3d087c093701925920834923881/v.f42905.mp4",
            vnum: 9,
            vodPlay: false,
            weight: 1,
            wish: 64211,
            wishst: 0,
          },
          {
            bingeWatch: 0,
            img: "https://p0.meituan.net/movie/6876f0a4db61cab652fdc3d3ed14e94c4924473.jpg@267w_371h_1e_1c",
            boxInfo: "上映3天，累计票房1911万",
            cat: "喜剧,青春,家庭",
            civilPubSt: 0,
            desc: "主演:胡先煦,邓恩熙,郑伟",
            dir: "郑芬芬",
            dur: 105,
            effectShowNum: 0,
            followst: 0,
            globalReleased: true,
            haspromotionTag: false,
            headLineShow: false,
            id: 1284955,
            isRevival: false,
            late: false,
            localPubSt: 0,
            mark: false,
            mk: 8.4,
            movieType: 0,
            nm: "二哥来了怎么办",
            pn: 295,
            preSale: 0,
            preShow: false,
            proScore: 0,
            proScoreNum: 0,
            pubDate: 1626364800000,
            pubShowNum: 0,
            recentShowDate: 1626537600000,
            recentShowNum: 0,
            rt: "2021-07-16",
            sc: 8.4,
            scm: "重组家庭尬事多，哥外有哥不孤单",
            scoreLabel: "猫眼购票评分",
            showCinemaNum: 65,
            showInfo: "今天65家影院放映453场",
            showNum: 453,
            showTimeInfo: "2021-07-16 本周五上映",
            showst: 3,
            snum: 17577,
            star: "胡先煦,邓恩熙,郑伟",
            totalShowNum: 924,
            ver: "2D",
            videoId: 472744,
            videoName: "《二哥来了怎么办》“最好的家”版终极预告，预售已开启",
            videourl:
              "https://vod.pipi.cn/43903a81vodtransgzp1251246104/c689c8683701925920615870459/v.f42905.mp4",
            vnum: 20,
            vodPlay: false,
            weight: 1,
            wish: 132333,
            wishst: 0,
          },
          {
            bingeWatch: 0,
            img: "https://p0.meituan.net/movie/6876f0a4db61cab652fdc3d3ed14e94c4924473.jpg@267w_371h_1e_1c",
            boxInfo: "上映70天，累计票房16544万",
            cat: "动作",
            civilPubSt: 0,
            desc: "主演:杰森•斯坦森,霍特·麦克卡兰尼,罗奇·威廉姆斯",
            dir: "盖·里奇",
            dur: 115,
            effectShowNum: 0,
            followst: 0,
            fra: "美国,中国台湾",
            frt: "2021-05-07,2021-04-29",
            globalReleased: true,
            haspromotionTag: false,
            headLineShow: false,
            id: 1226046,
            isRevival: false,
            late: false,
            localPubSt: 0,
            mark: false,
            mk: 8.6,
            movieType: 0,
            nm: "人之怒",
            pn: 113,
            preSale: 0,
            preShow: false,
            proScore: 0,
            proScoreNum: 0,
            pubDate: 1620576000000,
            pubShowNum: 0,
            recentShowDate: 1626537600000,
            recentShowNum: 0,
            rt: "2021-05-10",
            sc: 8.6,
            scm: "杰森强势回归！",
            scoreLabel: "猫眼购票评分",
            showCinemaNum: 5,
            showInfo: "今天5家影院放映12场",
            showNum: 12,
            showTimeInfo: "2021-05-10上映",
            showst: 3,
            snum: 65321,
            star: "杰森•斯坦森,霍特·麦克卡兰尼,罗奇·威廉姆斯",
            totalShowNum: 31,
            ver: "2D",
            videoId: 467657,
            videoName:
              "0510《人之怒》曝“复仇”版预告：杰森·斯坦森卧底安保公司找内鬼",
            videourl:
              "https://vod.pipi.cn/d5457264vodtranscq1251246104/c4109ff05285890817923415374/v.f42905.mp4",
            vnum: 10,
            vodPlay: false,
            weight: 1,
            wish: 57070,
            wishst: 0,
          },
          {
            bingeWatch: 0,
            img: "https://p0.meituan.net/movie/6876f0a4db61cab652fdc3d3ed14e94c4924473.jpg@267w_371h_1e_1c",
            boxInfo: "上映38天，累计票房26155万",
            cat: "爱情,剧情",
            civilPubSt: 0,
            desc: "主演:邱泽,许玮甯,蔡振南",
            dir: "殷振豪",
            dur: 114,
            effectShowNum: 0,
            followst: 0,
            fra: "中国台湾点映,中国台湾",
            frt: "2021-03-26,2021-04-01",
            globalReleased: true,
            haspromotionTag: false,
            headLineShow: false,
            id: 1360592,
            isRevival: false,
            late: false,
            localPubSt: 0,
            mark: false,
            mk: 8.4,
            movieType: 0,
            nm: "当男人恋爱时",
            pn: 121,
            preSale: 0,
            preShow: false,
            proScore: 0,
            proScoreNum: 0,
            pubDate: 1623340800000,
            pubShowNum: 0,
            recentShowDate: 1626537600000,
            recentShowNum: 0,
            rt: "2021-06-11",
            sc: 8.4,
            scm: "邱泽许玮甯演绎催泪爱情恋曲",
            scoreLabel: "猫眼购票评分",
            showCinemaNum: 20,
            showInfo: "今天20家影院放映42场",
            showNum: 42,
            showTimeInfo: "2021-06-11上映",
            showst: 3,
            snum: 126110,
            star: "邱泽,许玮甯,蔡振南",
            totalShowNum: 122,
            ver: "2D",
            videoId: 470655,
            videoName: "《当男人恋爱时》闽南语版预告：勇敢相爱，铭心刻骨",
            videourl:
              "https://vod.pipi.cn/43903a81vodtransgzp1251246104/159ff98c3701925919037508882/v.f42905.mp4",
            vnum: 8,
            vodPlay: false,
            weight: 1,
            wish: 56474,
            wishst: 0,
          },
          {
            bingeWatch: 0,
            img: "https://p0.meituan.net/movie/6876f0a4db61cab652fdc3d3ed14e94c4924473.jpg@267w_371h_1e_1c",
            boxInfo: "喵，即将上映",
            cat: "冒险,奇幻,动画",
            civilPubSt: 0,
            desc: "主演:唐小喜,张福正,魏超",
            dir: "黄家康",
            dur: 131,
            effectShowNum: 265,
            followst: 0,
            globalReleased: false,
            haspromotionTag: false,
            headLineShow: false,
            id: 1298542,
            isRevival: false,
            late: false,
            localPubSt: 0,
            mark: false,
            mk: 0,
            movieType: 0,
            nm: "白蛇2：青蛇劫起",
            pn: 67,
            preSale: 1,
            preShow: false,
            proScore: 0,
            proScoreNum: 0,
            pubDate: 1626969600000,
            pubShowNum: 265,
            recentShowDate: 1626969600000,
            recentShowNum: 0,
            rt: "2021-07-23",
            sc: 0,
            scm: "但执心中一念，可历千难万劫",
            scoreLabel: "暂无评分",
            showCinemaNum: 0,
            showInfo: "2021-07-23 下周五上映",
            showNum: 0,
            showTimeInfo: "2021-07-23 下周五上映",
            showst: 4,
            snum: 2098,
            star: "唐小喜,张福正,魏超",
            totalShowNum: 422,
            ver: "IMAX 3D/CINITY 3D/3D/2D",
            videoId: 472758,
            videoName: "《白蛇2：青蛇劫起》预售开启，宝青坊主九尾狐形象曝光",
            videourl:
              "https://vod.pipi.cn/43903a81vodtransgzp1251246104/b54834283701925920625996134/v.f42905.mp4",
            vnum: 10,
            vodPlay: false,
            weight: 1,
            wish: 298125,
            wishst: 0,
          },
        ],
      },
      containerWidth: 0,
      index: 0,
    };
  },
  methods: {
    changeIndex(i) {
      if (i <= 0) {
        i = 0;
      }
      if(i>=1){
        i=1
      }
      this.index = i;
    },
  },
  mounted() {
    this.containerWidth = this.$refs.movies.clientWidth - 20;
  },
  computed: {
    marginLeft() {
      return -this.index * this.containerWidth + "px";
    },
  },
};
</script>


<style lang="less" scoped>
.movies-container {
  margin-top: 40px;
  .t-body-movies {
    width: 1190px;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    li {
      width: 100%;
      height: 100%;
      margin: 2px 12px;
      .flim-box {
        width: 1000000px;
        transition: 1s;

        .flim {
          width: 214px;
          height: 297px;
          position: relative;
          margin-right: 20px;
          float: left;

          .flim-img {
            width: 100%;
            border-radius: 5px;
          }
          .flim-quality {
            position: absolute;
            height: 20px;
            width: auto;
            top: 10px;
            left: -6px;
            z-index: 999;
          }
          .flim-info {
            width: 100%;
            height: 100px;
            box-sizing: border-box;
            position: absolute;
            bottom: 0;
            border-radius: 0 0 5px 5px;
            color: #fff;
            text-align: left;
            padding: 0 10px;
            background: linear-gradient(
              rgba(138, 62, 62, 0),
              rgba(29, 45, 55, 0.8)
            );

            .flim-mark {
              margin-top: 45px;
              font-size: 12px;
              font-weight: 500;
              .mark {
                font-size: 16px;
                color: #fd9827;
                font-weight: 500;
                margin-left: 2px;
              }
            }
            .flim-name {
              float: left;
              width: 6em;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-weight: 500;
              margin-top: 2px;
            }
            .buy-ticket {
              float: right;
              background-color: red;
              padding: 3px 12px;
              border-radius: 50px;
              cursor: pointer;
              font-size: 14px;
            }
          }
        }
      }
    }
    .btn {
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      color: #fff;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0;
      transition: opacity 0.5s;
      &.l-btn {
        left: 0;
      }
      &.r-btn {
        right: 0;
      }
      i {
        font-weight: bold;
      }
    }
    &:hover {
      .btn {
        opacity: 1;
      }
    }
  }
}
</style>